<template>
  <NoActionGoBack/>
  <div class="wrap-wh">
    <div class="login center">
      <h1 style="text-align: center;font-size: 40px;font-weight:bold;padding-top: 100px;padding-bottom: 80px;">用户登录</h1>
      <el-form :model="form"  :rules="rules" ref="formRef">
        <el-form-item label="" prop="phone">
          <el-input-number :controls="false"  v-model="form.phone" placeholder="请输入11位手机号码" maxlength="11" minlength="11" style="margin:0 auto;width: 582px;height: 93px;"/>
        </el-form-item>
          <div class="button-login" style="width:1305px;margin:0 auto;display: flex;justify-content: space-around">
            <my-button @click="onSubmit(formRef)" text="登录"/>
            <my-button @click="routerGo('nav')" text="取消"/>
          </div>
      </el-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
import type {FormInstance} from 'element-plus'
import {useRouter} from 'vue-router'

const formRef = ref<FormInstance>()
const router = useRouter()

const form = reactive({
  phone: '请输入11位手机号码',
})
const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      sessionStorage.setItem('userPhone', form.phone)
      router.push({
        path: '/question-type'
      })
      console.log('submit!')
    } else {
      console.log('error submit!')
      return false
    }
  })
}
const checkPhone = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入手机号'))
  } else if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
    callback(new Error("请输入正确手机号"))
  } else {
    callback()
  }
}
const rules = reactive({
  phone: [{validator: checkPhone, trigger: 'change'}],
})


function routerGo(path: string) {
  router.push({
    path: `/${path}`
  })
}
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper){
  border-radius: 15px;
}
:deep(.el-form-item__error){
  left: 50%;
  font-size: 20px;
  transform: translateX(-50%);
}
.login {
  background: url("../assets/Login/loginbg.png");
  width: 1305px;
  height: 672px;
}

input[type=number]{
}
:deep(.el-input__wrapper .el-input__inner){
  font-size: 30px !important;
}
</style>